<template>
  <view class="main">
    <view class="ip-item">
      <textarea
        maxlength="300"
        v-model="formData.desc"
        type="text"
        placeholder="圈子介绍编辑"
        placeholder-class="ip"
        class="text-area"
      />
      <view class="number">
        {{ descNumber + "/" + 300 }}
      </view>
    </view>

    <view class="up-box">
      <view class="upload">
        <ImageUpload @upload="uploading" />
      </view>
      <!-- <view class="number"> <text style="color: #0753fd">1</text>/300</view> -->
    </view>
  </view>
  <view class="btns">
    <Button
      @clickButton="postTrendsChange"
      :loading="loading"
      loading-text="发布中"
      text="发布"
    />
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { postTrends } from "@/api/apiList";
const getIds = ref();
onLoad((e) => {
  getIds.value = e.id ? e.id : "";
});

const postTrendsChange = async () => {
  console.log(getIds.value, "getIds.value");

  if (!formData.value.desc) {
    uni.showToast({
      title: "请填写介绍",
      icon: "none",
    });
    return;
  }
  // if (!uploadingImage.value) {
  //   uni.showToast({
  //     title: '请上传图片',
  //     icon: 'none'
  //   })
  //   return
  // }
  loading.value = true;
  const response = await postTrends({
    type: 0,
    circleId: getIds.value,
    content: formData.value.desc,
    images: uploadingImage.value?.join(","),
    source: 0,
  });
  if (response && response?.code == 200) {
    uni.showToast({
      title: "发布成功",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateBack({ delta: 1 });
    }, 800);
  }
};
const formData = ref({
  community: "",
  desc: "",
});

// 监听输入的详情字数
const descNumber = ref(0);
watch(
  () => formData.value.desc,
  () => {
    descNumber.value = formData.value.desc.length;
  },
  { deep: true }
);

const loading = ref(false);
const submit = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    postTrendsChange();
  }, 2000);
};

const uploadingImage = ref();
const uploading = (e) => {
  console.log(e);
  uploadingImage.value = e;
};
</script>

<style lang="scss" scoped>
.main {
  padding: 50rpx;

  .up-box {
    .upload {
      margin-top: 24rpx;
    }

    .number {
      color: #bbbbbb;
      font-size: 22rpx;
    }
  }
}

.btns {
  padding: 0 30rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 66rpx;
}
</style>
